/*
 * @Description:通用面板标题行，包括标题，操作
 * @Author: Rfan
 * @Date: 2022-03-31 14:00:56
 * @LastEditTime: 2022-04-25 16:48:51
 */
import { Button, Divider, Modal, Space } from 'antd';
import classNames from 'classnames/bind';
import { useMemo, useState } from 'react';
import { useRoleContext } from '../contexts/RoleContext';

import styles from '../styles/rolePane.module.scss';
import AddUserDialog from './dialogs/AddUser/Index';

const cx = classNames.bind(styles);

const PaneOperate = () => {
  const {
    selectRoleId,
    selectTab,
    selectUserIds,
    deleteRoleFunc,
    deleteRoleUserFunc,
    getRoleUserList
  } = useRoleContext();

  // 添加用户弹窗状态
  const [addUserVisible, setAddUserVisible] = useState(false);

  /**
   * @description: 删除角色方法
   */
  const delRole = () => {
    Modal.confirm({
      title: '删除',
      content: '确认删除该角色？',
      onOk() {
        deleteRoleFunc(selectRoleId);
      },
      onCancel() {
        console.log('del role Cancel');
      }
    });
  };

  /**
   * @description: 删除用户方法
   */
  const delUser = () => {
    console.log('del', selectUserIds);

    Modal.confirm({
      title: '删除',
      content: `您已选中了${selectUserIds.length}位用户，是否从此角色中删除？`,
      onOk() {
        deleteRoleUserFunc(selectUserIds);
      },
      onCancel() {
        console.log('del user Cancel');
      }
    });
  };

  /**
   * @description: 打开添加角色用户弹窗
   * @return {*}
   */
  const showAddDialog = () => {
    setAddUserVisible(true);
  };

  /**
   * @description: 关闭添加角色用户弹窗，根据参数判断取消还是保存
   * @param {boolean} saveFlag 保存标识符
   */
  const closeAddDialog = (saveFlag: boolean) => {
    if (saveFlag) {
      const params = {
        pageNo: 1,
        pageSize: 10,
        roleId: selectRoleId
      };
      getRoleUserList(params);
    }
    setAddUserVisible(false);
  };

  return (
    <div className={cx('search-wrap')}>
      {parseInt(selectTab, 10) === 2 ? (
        <Space key="list">
          <Button>密码重置</Button>
          <Button>批量修改</Button>
          <Button
            disabled={selectUserIds.length === 0}
            danger
            onClick={() => {
              delUser();
            }}
          >
            删除用户
          </Button>
          <Button
            type="primary"
            onClick={() => {
              showAddDialog();
            }}
          >
            添加用户
          </Button>
          <Divider type="vertical" />
          <Button>筛选</Button>
        </Space>
      ) : (
        <Space key="normal">
          <Button
            danger
            onClick={() => {
              delRole();
            }}
          >
            删除角色
          </Button>
          <Button type="primary">保存修改</Button>
        </Space>
      )}
      {useMemo(
        () => (
          <AddUserDialog
            visible={addUserVisible}
            roleId={parseInt(selectRoleId, 10)}
            onClose={closeAddDialog}
          />
        ),
        [addUserVisible]
      )}
    </div>
  );
};

export default PaneOperate;
